<template>
	<view class="content">
		<view v-for="(item,index) in orderDetail" :key="index">
			<view class="order-status fs14 color3">
				<view class="item mt0">
					<text>订单编号：</text><text>{{item.orderitem.OrderId}}</text>
				</view>
				<view class="item">
					<text>订单时间：</text><text>{{item.orderitem.OrderDate}}</text>
				</view>
				<view class="item">
					<text>支付方式：</text><text>{{item.orderitem.PayType || '-'}}</text>
				</view>
				<view class="item clear-both">
					<text>订单状态：</text><text>{{item.orderitem.OrderStatus}}</text>
					<view class="float-r ljzf fs12 colorf text-center" v-show="item.orderitem.paynow" @tap="continuePay">立即支付</view>
				</view>
			</view>
			<view class="order-status fs14 color3">
				<view class="item mt0">
					<text>配送信息：</text><text>{{item.orderitem.ConsigneeAddress}}</text>
				</view>
				<view class="item">
					<text>收货人：</text><text>{{item.orderitem.Consignee}}</text>
				</view>
				<view class="item">
					<text>联系方式：</text><text>{{item.orderitem.ConsigneePhone}}</text>
				</view>
				<view class="item">
					<text>配送时间：</text><text>{{item.orderitem.DeliveryDate}} {{item.orderitem.DeliveryTimeBegin}}-{{item.orderitem.DeliveryTimeEnd}}</text>
				</view>
				<!-- <view class="item">
					<text>签收时间：</text><text>待签收</text>
				</view> -->
			</view>
			<view class="order-det" v-for="(items,indexs) in item.orderdetails" :key="indexs">
				<view class="order-list clear-both">
					<view class="list-l">
						<image :src="items.img" mode="aspectFill" class="list-limg"></image>
					</view>
					<view class="list-c">
						<view class="text-over colorFF6 font-weight fs14">{{items.CommodityName}}</view>
						<view class="list-i fs12">{{items.Unit}}</view>
						<view class="list-i color3 fs12">¥{{items.ActualPrice.toFixed(2)}}</view>
					</view>
					<view class="list-r">
						<view class="color9 fs12">×{{items.Number}}</view>
						<view class="list-i">{{items.PackageName}}</view>
					</view>
				</view>
				<!-- <view class="oder-card clear-both fs14 color3">
					<view class="float-l">蛋糕牌：</view>
					<view class="float-r">无</view>
				</view> -->
				<!-- <view class="xiaoji fs14">
					<text class="color9">小计：</text><text class="colorm font-weight">¥{{(items.ActualPrice*items.Number).toFixed(2)}}</text>
				</view> -->
			</view>
			<!-- <view class="oder-card clear-both fs14 color3">
				<view class="float-l">配送方式：标准配送</view>
			</view> -->
			<view class="fs14 mt2">
				<text class="color9">总金额：</text><text class="colorm font-weight">¥{{item.orderitem.TotalOrderAmount?item.orderitem.TotalOrderAmount.toFixed(2):0}}</text>
			</view>
			<view class="fs14 mt2">
				<text class="color9">应付：</text><text class="colorm font-weight">¥{{item.orderitem.PayableAmount?item.orderitem.PayableAmount.toFixed(2):0}}</text>
			</view>
			<view class="fs14 mt2">
				<text class="color9">优惠：</text><text class="colorm font-weight">¥{{item.orderitem.TotalDiscountAmount?item.orderitem.TotalDiscountAmount.toFixed(2):0}}</text>
			</view>
			<view class="fs14 mt2">
				<text class="color9">已付：</text><text class="colorm font-weight">¥{{item.orderitem.PayAmount?item.orderitem.PayAmount.toFixed(2):0}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/api/request/index.js'
	import date_parse from '@/util/date/date-parse.js'
	export default {
		data() {
			return {
				orderDetail:[],
				orderid:''
			};
		},
		onLoad(options) {
			
			var that=this;
			if(options.id){
				that.orderid=options.id;
				uni.showLoading({
					mask:true
				})
				request.get({
						data: {
							c: 'UserOrderController',
							m: 'OrderDetails',
							pageno:1,
							rediskey:'',
							orderid:options.id
						}
					})
					.then(res => {
						console.log(res)
						if (res.Status == "ok") {
							res.Tag.map((item)=>{
								item.orderitem.DeliveryDate=date_parse.jsonDateToDateString(item.orderitem.DeliveryDate);
								item.orderitem.OrderDate=date_parse.jsonDateToDateTimeString(item.orderitem.OrderDate);
								item.orderitem.paynow=false;
								let paystatus=item.orderitem.PayStatus;
								let orderstatus=item.orderitem.OrderStatus;
								if(paystatus=='未支付'&&(orderstatus!=="已作废" && orderstatus!=="拒收")&&item.orderitem.PayType!='货到付款'){ item.orderitem.paynow=true;item.orderitem.OrderStatus="待付款";}
								item.orderdetails.map((detais)=>{
									detais.img=that.$cartImgsrc.replace('{0}',detais.CommodityName)
								})
								
							})
							that.orderDetail=res.Tag;
				
						} else {
							uni.showModal({
								title:res.Msg,
								showCancel:false
							})
						}
					})
					.catch(error => {
						console.error(error)
						
					});
			}
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		methods:{
			getOrderinfo() {
				let that = this;
				uni.showLoading({
					mask: true,
					title: '获取订单信息...'
				});
				request.get({
						data: {
							c: 'AddPaymentController',
							m: 'GetOrderInfo',
							rediskey: '',
							orderid: that.orderid
						}
					})
					.then(res => {
						if (res.Status == "ok") {
							let result=res.Tag;
							uni.navigateTo({
								url:"/pages/weixin/redirect?to_uri=" + encodeURIComponent("/pages/weixin/weixin?orderid=" + that.orderid)
							})
						} else {
							if (res.Msg == "当前订单已支付" || res.Msg == "当前订单无需支付") {
								uni.showModal({
									title: res.Msg,
									showCancel: false
								});
			
							} else {
								uni.showModal({
									title: res.Msg,
									showCancel: false
								});
							}
						}
					})
					.catch(error => {
						console.error(error)
			
					});
			},
			continuePay(){
				this.getOrderinfo();
			}
		}
		
	}
</script>

<style lang="scss">
.content{
	padding-bottom: 4vw;
	.order-status {
		padding: 4vw;
		border-bottom: 2.667vw solid #f3f3f3;
		.item{
			margin-top: 2.667vw;
			.ljzf{
				padding: 1vw 2vw;
				background: #00449F;
			}
		}
	}
	.order-det{
		border-bottom: 2.667vw solid #f3f3f3;
		.order-list {
			padding: 4vw 0;
			border-bottom: 0.2667vw solid #e1e1e1;
			width: 92vw;
			margin: 0 4vw;
			.list-l {
				width: 16vw;
				height: 16vw;
				float: left;
				.list-limg {
					width: 14.5vw;
					height: 14.5vw;
					margin-top: 1.5vw;
				}
			}
			.list-c {
				width: 40vw;
				height: 19vw;
				margin-left: 4vw;
				float: left;
			}
			.list-r {
				width: 28vw;
				height: 16vw;
				float: right;
				text-align: right;
			}
			.list-i {
				font-size: 3.2vw;
				color: #999;
				margin-top: 1.6vw;
			}
		}
	}
	.oder-card{
		width: 92vw;
		margin: 0 4vw;
		padding: 4vw 0;
		border-bottom: 1px solid #e1e1e1;
	}
	
	.xiaoji{
		width: 92vw;
		margin: 0 4vw;
		padding: 4vw 0;
		text-align: right;
	}
	.mt2{
		margin-top: 4vw;
		text-align: right;
		padding-right: 4vw;
	}
}
</style>
